import {CCard} from '@/components/card'
import {ParamOfStatus} from '@/components/image'
import {CItemUpDown} from '@/components/item'
import {CnBoldSpan, CnNormalSpan} from '@/components/text'
import {WaterTargetEchart} from '@/components/waterTarget'
import {PropType} from 'vue'

export const WaterAnalyzeCard = defineComponent({
  props: {
    abnormalDivision: {
      type: Object as PropType<SingleParam.AbnormalDivision>,
      required: true
    },
    paramNameV: String
  },
  setup(props, ctx) {
    const waterTargetEchartSeriesData = computed(() => {
      const seriesData = Object.keys(props.abnormalDivision.exceptionRatioMap).map(key => {
        return {
          name: key,
          value:
            props.abnormalDivision.exceptionRatioMap[
              key as keyof typeof props.abnormalDivision.exceptionRatioMap
            ]
        }
      })
      const returnData = []
      returnData[0] = seriesData.filter(data => data.name === '适宜')[0]
      returnData[1] = seriesData.filter(data => data.name === '偏高')[0]
      returnData[2] = seriesData.filter(data => data.name === '偏低')[0]
      return returnData
    })
    onMounted(() => {
      console.log(props.paramNameV)
      // checkDataName.value =
    })

    const checkDataName = ref('')
    return () => (
      <CCard class='col-span-1 bg-white rounded-4 h-480' title={`${props.paramNameV}异常分布`}>
        <div class='pt-10 px-8 mt-18'>
          <div class='flex'>
            <WaterTargetEchart
              canvasId='singleParamWaterAnalyze'
              width='100px'
              height='100px'
              seriesData={waterTargetEchartSeriesData.value}
            ></WaterTargetEchart>
            <div class='ml-24'>
              <ParamOfStatus class='mr-24' status='适宜' isCircle={false}>
                适宜
              </ParamOfStatus>
              <ParamOfStatus class='mr-24' status='偏高' isCircle={false}>
                偏高
              </ParamOfStatus>
              <ParamOfStatus class='' status='偏低' isCircle={false}>
                偏低
              </ParamOfStatus>
              <br></br>
              <CnNormalSpan class='text-12 mr-18'>适宜时段</CnNormalSpan>
              <CnBoldSpan class='text-12 text-success'>
                {props.abnormalDivision.exceptionRatioMap['适宜']}%
              </CnBoldSpan>
              <br></br>
              <CnNormalSpan class='text-12 mr-18'>偏高时段</CnNormalSpan>
              <CnBoldSpan class='text-12 text-danger'>
                {props.abnormalDivision.exceptionRatioMap['偏高']}%
              </CnBoldSpan>
              <br></br>
              <CnNormalSpan class='text-12 mr-18'>偏低时段</CnNormalSpan>
              <CnBoldSpan class='text-12 text-warning'>
                {props.abnormalDivision.exceptionRatioMap['偏低']}%
              </CnBoldSpan>
              <br></br>
            </div>
          </div>
          <div class='h-0 border-b border-splitLine mt-22'></div>
          <div class='h-216 overflow-y-auto'>
            {props.abnormalDivision.checkDataList.map(item => (
              <CItemUpDown
                class='pt-10 pr-8 pb-10 pl-16'
                title={props.abnormalDivision.devName}
                subTitle={item.checkTime}
              >
                <div class='h-18'>
                  <ParamOfStatus
                    name={item.checkDataName}
                    status={item.paramStatus}
                  ></ParamOfStatus>
                  <CnNormalSpan class='ml-32'>{item.checkDataValue}</CnNormalSpan>
                  <CnNormalSpan>{item.checkDataUnit}</CnNormalSpan>
                  <CnNormalSpan class='ml-32'>{item.paramStatus}</CnNormalSpan>
                </div>
              </CItemUpDown>
            ))}
          </div>
          <div class='flex justify-end items-start'>
            <a-button class='bg-primaryLight h-28'>
              <CnNormalSpan class='text-primary text-12'>查看</CnNormalSpan>
            </a-button>
          </div>
        </div>
      </CCard>
    )
  }
})
